<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, #outer input, #outer button {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        #outer {
            width: 500px;
            margin: 30px auto;
            font: 0.6em "微软雅黑";
        }
        #outer input, #outer button {
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id= "outer">
        <input type="text" value= "1,2,3" />输入数字求和，数字之间用半角","号分隔<br>
        <button>求和</button>
        <strong id="sum"></strong>
    </div>
</body>
</html>

<script>
    var oBtn = document.getElementsByTagName("button")[0];
    var oInput = document.getElementsByTagName("input")[0];
    var oSum = document.getElementById("sum");
    oInput.onkeyup = function() {
        this.value = this.value.replace(/[^(\d)|(,)]/,"");
    }
    oBtn.onclick = function() {
        var sum = 0;
        var oInput = document.getElementsByTagName("input")[0].value.split(",");
        for (var i in oInput) {
            sum += parseInt(oInput[i]);
        }
        oSum.innerHTML = sum;
    }
</script>